@import '~styles/vars';
@import '~styles/extendables';

.not-found {
  @extend %center-x-y;
  @extend %app-width;
  position: fixed;
  top: 0;
  background: $color-yellow;
  height: 100vh;
  z-index: 1000;

  .message {
    margin-top: -150px;
    text-align: center;

    h1 {
      font-weight: $font-bold;
      font-size: 32px;
    }

    p {
      font-size: 18px;
      margin-bottom: 30px;
    }

    a {
      .icon {
        color: $color-black;
        margin-bottom: 5px;
        font-size: 100px;
      }

      span {
        display: block;
        color: $color-black;
      }
    }
  }
}
